import { PlusOutlined } from '@ant-design/icons';
  import {
    Button,
    Col,
    DatePicker,
    Drawer,
    Form,
    Input,
    message,
    Modal,
    Row,
    Select,
  } from 'antd';
  import moment from 'moment';
  import { useEffect, useState } from 'react';
  import styles from './index.less';
  const { Option } = Select;
    
  const Remark = (props) => {
    const [remarkList, setRemarkList] = useState([])
    const { value, onChange } = props;
    console.log(value, '--value--')
  
    useEffect(() => {
    //   if(value.length > 0) {
    //     setRemarkList(value)
    //   }
    }, [value]);
  
    const onClose = () => {
      onCloseVisible(false);
    };
    const add = () => {
        remarkList.push({
            type: '0',
            num: 5,
            time: '0'
        })
        setRemarkList(JSON.parse(JSON.stringify(remarkList)))
    }
    const handleChange1 = (value, index) => {
        let currItem = remarkList[index];
        let newItem = Object.assign({}, currItem, {type: value});
        updateList(index, newItem)
    }
    const handleChange2 = (e, index) => {
        let currItem = remarkList[index];
        let newItem = Object.assign({}, currItem, {num: e.target.value});
        updateList(index, newItem)
    }
    const handleChange3 = (value, index) => {
        let currItem = remarkList[index];
        let newItem = Object.assign({}, currItem, {time: value});
        updateList(index, newItem)
    }
    const updateList = (index,newItem) => {
        remarkList.splice(index, 1, newItem);
        setRemarkList(JSON.parse(JSON.stringify(remarkList)))
        onChange(remarkList)
    }


   
    return (
      <>
        <div onClick={add} style={{lineHeight: '30px',color: '#9056cd', cursor: 'pointer'}}><PlusOutlined />添加新提醒</div>
        {remarkList.length > 0 && remarkList.map((item, index)=>(
            <Row gutter={10} key={index} style={{margin: '5px 0'}}>
            <Col span={12}>
                <Select onChange={(e) => handleChange1(e,index)} value={item.type}>
                    <Option value='0'>系统提醒</Option>
                    <Option value='1'>电子邮箱</Option>
                </Select>
            </Col>
            <Col span={5}>
                <Input value={item.num} type='number' placeholder='数字' onChange={(e) => handleChange2(e,index)} />
            </Col>
            <Col span={6}>
                <Select onChange={(e) => handleChange3(e,index)} value={item.time}>
                    <Option value='0'>分钟</Option>
                    <Option value='1'>天</Option>
                </Select>
            </Col>
            </Row>
        ))}
       
      </>
    );
  };
  
  export default Remark;
  